<template>
  <div class="box">
    <div class="box-header" :title="hintText">
      <span class="title pos-left">{{title}}</span>
    </div>
    <div class="box-body">
      <div class="chart" id="chart-risk-1"></div>
      <ul class="towerlist">
        <li class="item">
          <div class="title">纳入监测数据项</div>
          <div class="subtitle num fg-green">{{monitoredDataCount}}</div>
        </li>
        <li class="item">
          <div class="title">已发现异常数据</div>
          <div class="subtitle num fg-orange">{{abnormalSpottedCount}}</div>
        </li>
        <li class="item">
          <div class="title">异常数据占比</div>
          <div class="subtitle num fg-cyan">
            {{abnormalDataPercentage}}
            <small>%</small>
          </div>
        </li>
      </ul>
      <x-loading v-if="showLoading"></x-loading>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";
import bus from '@/utils/bus'

export default {
  data() {
    return {
      hintText: "显示本年异常数据",
      monitoredDataCount: 0,
      abnormalSpottedCount: 0,
      abnormalDataPercentage: 0,
      showLoading: false,
      chartInstance: null,
      option: null,
      chartData: null,
      //URLHEAD2: "http://localhost:2194/Interface/API.aspx?HTTEST=test&Method="
      URLHEAD2: "http://114.115.153.22:2222/Interface/API.aspx?HTTEST=test&Method="
    };
  },
  props: {
    title: String
  },
  components: {
    "x-loading": Loading
  },
  mounted() {
      this.renderChart()
      this.renderTower()
  },
  methods: {
    renderTower() {
      this.showLoading = true;
      axios.get(this.URLHEAD2 + "YCQKZL_BOTTOM").then(res => {
        let json = res.data;
        bus.$emit('complete1',(100-json.Data.YC_Ratio));
        this.monitoredDataCount = json.Data.JC_Count;
        this.abnormalSpottedCount = json.Data.YC_Count;
        this.abnormalDataPercentage = json.Data.YC_Ratio;
        this.showLoading = false;
      });
    },
    renderChart() {
      this.showLoading = true;
      axios.get(this.URLHEAD2 + "YCQKZL").then(res => {
        let json = res.data;
        

        this.option = {
          backgroundColor: "transparent",
          tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)" },
          color: [
            "#32c5e9",
            "#9d96f5",
            "#9fe6b8",
            "#ffdb5c",
            "#ff9f7f",
            "#e062ae",
            "#e690d1",
            "#e7bcf3",
            "#9d96f5",
            "#8378ea",
            "#96bfff"
          ],
          series: [
            {
              name: "异常数据分布",
              type: "pie",
              radius: ["40%", "60%"],
              label: {
                normal: {
                  show: true,
                  formatter: "{b}\n{c}",
                  position: "outside"
                }
              },
              labelLine: { normal: { show: true } },
              data: json.Data.map(item=>{
                  return {
                      name:item.Name,
                      value:item.Data
                  }
              })
            }
          ]
        };
        this.chartInstance = this.$Crender("chart-risk-1", this.option);
        this.showLoading = false;
      });
    }
  }

};
</script>
<style scoped>
</style>
